<template>
	<div>
			<div class="pop">
				<h2>上传</h2>
				<p>
					<button id="browse">选择文件</button>
					<button id="upload-btn">开始上传</button>
					<button id="upload-btn1">暂停</button>
				</p>
				<ul id="file-list"></ul>
		</div>
		<div class="model"></div>
	</div>
</template>
<script>
	export default {
		methods: {
			close() {
				$(".model").hide();
				this.$emit('close');
			}
		},
		mounted() {
			var _this = this
			var uploader = new plupload.Uploader({
				browse_button: 'browse', //触发文件选择对话框的按钮，为那个元素id
				url: "http://localhost/activiti-web/upload", //服务器端的上传页面地址
				runtime: 'post',
				flash_swf_url: 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
				silverlight_xap_url: 'js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
				// Maximum file size
				max_file_size: '10m',
				drop_element: '.pop',
				chunk_size: 0,
				drop_element: 'file-list',
				multipart: true,
				use_http_method: 'post',
				filters: {
					max_file_size:10240000,
					prevent_duplicates: false
					//不允许选取重复文件
				},
				multipart_params:{
					taskId:'102559',
					 processInstanceId:'102551'
				}
			});
			//在实例对象上调用init()方法进行初始化
			uploader.init();
			//绑定文件添加进队列事件
			uploader.bind('FilesAdded', function(uploader, files) {
				for(var i = 0, len = files.length; i < len; i++) {
					var file_name = files[i].name; //文件名
					var str = "<a class='pic_delete' data-val='" + files[i].id + "'>删除</a>";
					//构造html来更新UI
					var html = '<li id="' + files[i].id + '" class="file" ><p class="file-name">' + file_name + '' + str + '</p><p class="progress"></p></li>';
					$(html).appendTo('#file-list');
				}
			});
			$(document).on('click', '.pic_delete', function() {
				$(this).parent().remove();
				//uploader.removeFile($(this).attr("data-val"));
				var toremove = '';
				var id = $(this).attr("data-val");
				for(var i in uploader.files) {
					if(uploader.files[i].id === id) {
						toremove = i;
					}
				}
				$('#' + id + '').hide(); //控制进度条
				uploader.files.splice(toremove, 1);
				//							console.log("" + $(this).attr("data-val"));
			});
			//绑定文件上传进度事件
			uploader.bind('UploadProgress', function(uploader, file) {
				$('#' + file.id + ' .progress').css('width', file.percent + '%'); //控制进度条
				$('#' + file.id + ' .progress').text(file.percent + '%'); //控制进度条
			});
			//上传错误
			uploader.bind('Error', function(uploader, err) {
				switch(err.code) {
					case 5:
					
						_this.$message({
							message: "上传完成！",
							type: 'success'
						});
						break;
					case -602:
						_this.$message({
							message: "不允许上传重复的文件！",
							type: 'error'
						});
 
						break;
					
					default:
						_this.$message({
							message: "服务器繁忙,请稍后重试！",
							type: 'error'
						});
						break;
				}
			});
			uploader.bind('removeFile', function(name) {});
			uploader.bind('FileUploaded', function(a, b, c) {
				_this.$emit('reFresh');
				_this.$message({
					message: "上传成功",
					type: 'success'
				});
				 $('.pic_delete').remove();
				 $(".file").remove();
					     console.log('111')
			});
			//上传按钮
			$('#upload-btn').click(function() {
				uploader.start(); //开始上传

			});
			$('#upload-btn1').click(function() {
				uploader.stop(); //停止上传
				_this.$message({
					message: "停止",
					type: 'error'
				});
			});

		}
	}
</script>
<style>
	#browse {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background-color: deepskyblue;
		border: none;
		border-radius: 3px;
		font-size: 14px;
		color: #fff;
		margin-left: 5%;
	}
	
	#upload-btn {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background-color: deepskyblue;
		border: none;
		border-radius: 3px;
		font-size: 14px;
		color: #fff;
	}
	
	#upload-btn1 {
		width: 80px;
		height: 30px;
		line-height: 30px;
		background-color: deepskyblue;
		border: none;
		border-radius: 3px;
		font-size: 14px;
		color: #fff;
	}
	
	.progress {
		height: 22px;
		font-size: 0;
		line-height: 22px;
		background: #13CE66;
		width: 0;
		color: #000000;
		font-size: 13px;
		margin: 3px 0px;
	}

	
	.model {
		z-index: 1004;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: .5;
		background: #000;
		display: none;
	}

	
	.pop h2 {
		width: 100%;
		height: 30px;
		line-height: 30px;
		padding-left: 2em;
		font-size: 14px;
		color: #000;
	}
	
	.pic_delete {
		display: inline-block;
		background-color: #FF4949;
		height: 20px;
		line-height: 20px;
		color: #fff;
		border-radius: 4px;
		margin-top: 3px;
		width: 50px;
		font-size: 13px;
		text-align: center;
		margin-left: 3%;
	}
	
	#file-list {
		min-height: 260px;
	}
	
	.file {
		width: 80%;
		margin: 2% 5%;
	}
	
	.exit {
		display: inline-block;
		line-height: 1;
		white-space: nowrap;
		cursor: pointer;
		background: #fff;
		border: 1px solid #bfcbd9;
		border-color: #c4c4c4;
		color: #1f2d3d;
		-webkit-appearance: none;
		text-align: center;
		box-sizing: border-box;
		outline: none;
		margin: 0;
		-moz-user-select: none;
		-webkit-user-select: none;
		-ms-user-select: none;
		padding: 10px 15px;
		font-size: 14px;
		border-radius: 4px;
		float: right;
		margin: 2% 5%;
	}
</style>